<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>{{title}}</template>
            <template v-slot:right></template>
        </nav-bar>

        <div class="mydz">
            <van-address-edit
            :area-list="areaList"
            :address-info ="addressInfo"
            show-delete
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
            @change-detail="onChangeDetail"
            />

        </div>

       
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { ref,onMounted,computed } from 'vue';
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
import {addAddress,getAddressDetail,editAddress,delAddress} from 'network/address';
import {useRouter,useRoute} from 'vue-router';

export default {
    name:"AddressEdit",
    components:{
        NavBar
    },
  setup() {
    const router = useRouter();  
    const route = useRoute();
    const searchResult = ref([]);
    const id = ref('');
    const type = ref('add');
    const addressInfo = ref({});

    // const state =reactive({
    //     areaList:{
    //         prvince_list:{},
    //         city_list:{},
    //         county_list:{}
    //     },
    //     searchResult:[],
    //     add
    // })

    //接收address传来的类型和ID
    onMounted(()=>{
         type.value = route.query.type;
         id.value = route.query.id;
          

         if(type.value == 'edit'){
             getAddressDetail(id.value).then(res=>{
                
                let _areaCode = ''
                const province = areaList.province_list;
                 
                Object.entries(areaList.county_list).forEach(([id,text])=>{
                    if(text == res.county){
                        // const provinceIndex = province.toLocaleString(item => item.id.substr(0,2) == id.substr(0,2))
                        const cityItem = Object.entries(areaList.city_list).filter(([cityId,city])=>cityId.substr(0,4) == id.substr(0,4));
                        const province = Object.entries(areaList.province_list).filter(([item,province])=>item.substr(0,2) == id.substr(0,2));
                        // console.log(province[0][1]);
                        if(province[0][1] == res.province && cityItem[0][1] == res.city ){
                            _areaCode = id
                        }                       
                    }
                })

                 addressInfo.value.name = res.name;
                 addressInfo.value.tel = res.phone;
                 addressInfo.value.province = res.province;
                 addressInfo.value.city = res.city;
                 addressInfo.value.county = res.county;
                 addressInfo.value.areaCode = _areaCode;
                 addressInfo.value.addressDetail = res.address;
                 addressInfo.value.isDefault = !!res.is_default;
             })
         }
        
    })

    const title = computed(()=>{
           console.log(type.value);
           return type.value == 'add' ? '添加地址' : '编辑地址';
        });

    


    const onSave = (data) => {
         
         const params = {
             name:data.name,
             address:data.addressDetail,
             phone:data.tel,
             province:data.province,
             city:data.city,
             county:data.county,
             is_default:data.isDefault ? 1 :  0,
         }

         if(type.value == 'edit'){
             editAddress(id.value,params);
             Toast('修改成功');
         }else if(type.value  == 'add'){
             addAddress(params);
             Toast('添加地址成功');
         }
         
            setTimeout(()=>{
                router.back();
            },1000)

    };
    const onDelete = () => {
        delAddress(id.value);
        Toast('删除成功');
        setTimeout(()=>{
                router.back();
            },1000)
    };  
    const onChangeDetail = (val) => {

    };

    return {
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
      type,
      id,
      title,
      addressInfo,
    };
  },
};
</script>

<style scoped lang="scss">
.mydz {
    margin-top: 55px;
}

</style>